<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="用户名">
              <a-input placeholder="请输入" v-model="queryParam.username"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchData">查询</a-button>
              <a-button style="margin-left: 8px" @click="clearSearchParam">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData">
      <template slot="genderTag" slot-scope="gender">
        <a-tag :color="gender==='MALE'?'blue':gender==='FEMALE'?'pink':'purple'">{{ gender | GenderFormat }}</a-tag>
      </template>
      <template slot="status" slot-scope="status">
        <a-tag color="blue">{{ status === 'NORMAL' ? '正常' : status === 'DISABLE' ? '禁用' : '未知' }}</a-tag>
      </template>
      <template slot="createTime" slot-scope="createTime">
        {{ createTime | moment }}
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a href="javascript:;">详情</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">
            更多 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="assigningPermission(record)">分配权限</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">禁用</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">删除</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </s-table>
    <assign-permission ref="assignPermissionModal"/>
    <user-update-modal ref="userUpdateModal" @close="refreshData"/>
  </a-card>
</template>

<script>
  import { STable } from '@/components'
  import { getUserList } from '@/api/manage'
  import { updateUserInfo } from '@/api/user'
  import AssignPermission from './modules/AssignPermission';
  import UserUpdateModal from './modules/UserUpdateModal';

  export default {
    name: 'UserList1',
    components: {
      UserUpdateModal,
      STable,
      AssignPermission
    },
    data () {
      return {
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '用户名',
            dataIndex: 'username'
          },
          {
            title: '昵称',
            dataIndex: 'nickname'
          },
          {
            title: '手机号',
            dataIndex: 'mobile'
          },
          {
            title: '邮箱地址',
            dataIndex: 'email'
          },
          {
            title: '性别',
            dataIndex: 'gender',
            scopedSlots: { customRender: 'genderTag' }
          },
          {
            title: '状态',
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            sorter: true,
            scopedSlots: { customRender: 'createTime' }
          }, {
            title: '操作',
            width: '200px',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log('加载数据参数:', Object.assign(parameter, this.queryParam))
          return getUserList(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res.data
            })
        }
      }
    },
    created () {
    },
    methods: {
      handleEdit (record) {
        this.$refs.userUpdateModal.show(record)
      },
      handleSubmit () {
        const { form: { validateFields }, $notification } = this
        validateFields({ force: true }, (err, fieldsValue) => {
          if (!err) {
            updateUserInfo(fieldsValue).then(res => {
              $notification[res ? 'success' : 'warning']({
                message: '提示',
                description: res ? '更新成功' : '更新失败',
                duration: 2
              })
            }).finally(() => {
              // 清空参数
              this.mdl = []
              // 关闭模态框
              this.visible = false
              // 刷新数据
              this.searchData()
            })
          }
        })
      },
      handleCancel () {
        // 清空参数
        this.mdl = []
        // 关闭模态框
        this.visible = false
        // 清空更新表单参数
        this.form.resetFields()
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      searchData: function () {
        this.$refs.table.refresh(true)
      },
      clearSearchParam: function () {
        this.queryParam = {}
        this.$refs.table.refresh(true)
      },
      refreshData: function () {
        this.clearSearchParam()
      },
      assigningPermission (record) {
        this.$refs.assignPermissionModal.show(record)
      }
    },
    watch: {
    }
  }
</script>
